<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>hydrogen-set demo</title>
    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../hydrogen-set.html">
    <link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
  </head>

  <style>
    body {
      margin: 0;
      font-family: "RobotoDraft","Roboto",sans-serif;
      font-size: 14;
    }
  </style>

  <body unresolved>
    <dom-module id="x-a">
      <template>
        <template is="dom-repeat" items="[[items]]">
          <span>[[item]]</span>
          <paper-checkbox
            name="[[item]]"
            on-iron-change="_onChange"
            checked="[[_isSelected(item, selected.*)]]"
            ></paper-checkbox>
        </template>
      </template>
    </dom-module>
    <script>
    Polymer({
      is: 'x-a',
      properties: {
        selected: {
          type: Array
        },
        items: {
          type: Array,
          value: function() {
            return ["a","b","c","d","e"];
          }
        }
      },
      _onChange: function(e) {
        var name = e.srcElement.name;
        if (name) {
          if (e.srcElement.checked) {
            this.fire('select', name);
          } else {
            this.fire('unselect', name);
          }
        }
      },
      _isSelected: function(item, selected) {
        return selected.base.indexOf(item) >= 0;
      }
    });
    </script>
    <template is="dom-bind">
      <hydrogen-set
        id="set"
        event-add="{{add}}"
        event-delete="{{del}}"
        out-value="{{selected}}"
      ></hydrogen-set>
      <div>
        Mutate the two sets below.
      </div>
      <br/>
      <div>First Set</div>
      <x-a
        id="a"
        on-select="add"
        on-unselect="del"
        selected="[[selected]]"
      ></x-a>
      <br/>
      <br/>
      <div>Second Set</div>
      <x-a
        id="b"
        on-select="add"
        on-unselect="del"
        selected="[[selected]]"
      ></x-a>
      <br/>
      <br/>
      <div>List Selected:</div>
      <template is="dom-repeat" items="[[selected]]">
        <div>[[item]]</div>
      </template>
    </template>
  </body>
</html>
